<!-- 原有设备修改 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>原有设备修改</title>
    <link rel="stylesheet" href="../layui/css/layui.css" />
    <link rel="stylesheet" href="../css/element.min.css?1" />
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2315128_5bb2ydgeqs.css">
    <link rel="stylesheet" href="../css/reset.css?3123">
    <link rel="stylesheet" href="../css/setlayui.css?12">
    <link rel="stylesheet" href="../css/viewer.min.css">
    <script src="../layui/layui.all.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/vue.min.js"></script>
    <script type="text/javascript" src="../js/element.min.js"></script>
    <script src="../js/viewer.min.js"></script>
</head>

<body>
    <div id="app" class="page-container" style="display: none;" v-show="showApp">
        <div class="contetn_box">
            <div class="cell_box">
                <div class="cell_name must_input">当前所在位置</div>
                <div class="cell_cont">
                    <el-select class="public_input" disabled v-model="subInfo.StoreId" placeholder="请选择">
                        <el-option v-for="(item,index) in sotreList" :key="index" :label="item.StoreName"
                            :value="item.StoreId">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="cell_box">
                <div class="cell_name must_input">设备名称</div>
                <div class="cell_cont">
                    <el-select class="public_input" disabled filterable v-model="subInfo.DeviceId" placeholder="请选择">
                        <el-option v-for="(item,index) in deviceList" :key="index" :label="item.Name" :value="item.Id">
                            <span style="float: left">{{ item.Name }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.Model }}</span>
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="cell_box">
                <div class="cell_name must_input">规格型号</div>
                <div class="cell_cont">
                    <el-input class="public_input" disabled v-model="subInfo.DeviceModel"> </el-input>
                </div>
            </div>
            <div class="cell_box">
                <div class="cell_name must_input">单位</div>
                <div class="cell_cont">
                    <el-input class="public_input" disabled v-model="subInfo.DeviceUnit"> </el-input>
                </div>
            </div>
            <div class="cell_box">
                <div class="cell_name must_input">设备数量</div>
                <div class="cell_cont">
                    <el-input class="public_input" placeholder="请输入设备数量" v-model="subInfo.FreeCount"> </el-input>
                </div>
            </div>
        </div>
        <div class="but_box" style="margin-top: 10px;">
            <el-button @click="cancels" class="cancelClass">取消</el-button>
            <el-button @click="confirms" type="primary" style="margin-left: 120px">提交</el-button>
        </div>
    </div>
    <script src="../js/public.js?1234"></script>
    <script>
        var layer = layui.layer
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    baseUrl:'',
                    // baseUrl: 'http://47.114.160.61:8050',
                    showApp: false,
                    sotreList: [],
                    deviceList: [],
                    subInfo: {
                        DeviceId: '',
                        DeviceName: "",
                        DeviceModel: "",
                        DeviceUnit: "",
                        StoreType: 1,
                        StoreId: '',
                        StoreName: "",
                        FreeCount: ''
                    },
                    materialName: '',
                    unit: '',
                };
            },
            methods: {
                cancels() {
                    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                    parent.layer.close(index);
                },
                //获取地址栏参数
                getQueryString(name) {
                    var reg = new RegExp("(^|/?|&)" + name + "=([^&]*)(&|$)", "i");
                    var r = decodeURIComponent(location.href).substr(1).match(reg);
                    if (r != null) return r[2];
                    return null;
                },
                confirms() {
                    var that = this
                    if (this.subInfo.FreeCount == '') {
                        this.$message({
                            message: '请输入设备数量',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    xLoading(true, '正在提交')
                    $.ajax({
                        type: 'post',
                        url: this.baseUrl + '/WebProxy/Proxy?url=OwnDevice/AddDevice',
                        data: {
                            param: JSON.stringify(this.subInfo),
                        },
                        dataType: 'json',
                        success: function (res) {
                            xLoading(false)
                            if (res.Code != 0) {
                                that.$message({
                                    message: res.Msg ? res.Msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            that.$message({
                                message: res.Msg,
                                type: 'success'
                            });
                            setTimeout(function () {
                                var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                                parent.layer.close(index);
                            }, 500)
                        }
                    });
                },
            },
            mounted() {
                window.onkeypress = (event) => {
                    if (event.keyCode == 32) event.returnValue = false
                }
                console.log(this.getQueryString('jsonData'))
                this.subInfo = JSON.parse(this.getQueryString('jsonData'));
                this.showApp = true;
            }
        });
    </script>
</body>
<style>
    .page-container {
        padding: 10px;
        padding-bottom: 0;
    }

    .contetn_box {
        padding: 30px;
        box-sizing: border-box;
        height: calc(100% - 80px);
        overflow: auto;
    }

    .cell_box {
        display: flex;
        margin-bottom: 20px;
    }

    .cell_name {
        width: 110px;
        text-align: right;
        line-height: 32px;
        padding-right: 10px;
    }

    .form_cont {
        padding-right: 10px;
        width: calc(100% - 172px);
        padding-right: 10px;
    }

    .cont_item {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }

    .input_but {
        display: flex;
    }

    .cell_cont {
        width: calc(100% - 110px);
    }

    .public_input {
        width: 100%;
    }

    .el-input.is-disabled .el-input__inner {
        background: #ffffff;
    }
</style>

</html>